<template>
	<view>
		<view class="container u-skeleton">
			<view class="header"></view>
			<Head class="head" />
			<text class="header-title u-skeleton-rect">童趣绘本</text>
			<view class="column u-skeleton-fillet" hover-class="touch" hover-start-time="0" hover-stay-time="300" @tap="toPicbook">
				<view class="column-image"> <ImageLoad src="https://hz-huibenxia.oss-cn-shenzhen.aliyuncs.com/Static-library/login/%E8%83%8C%E6%99%AF.png" borderRadius="30"/></view>
				<text class="column-summary fonts">这里有想象绘本、名家故事、国学经典、童趣古诗、儿歌童谣……</text>
			</view>
			<text class="column-title u-skeleton-rect">{{ evaluateData.profile.theory }}</text>
			<text class="column-subTitle u-skeleton-rect">{{ evaluateData.profile.title }}</text>
			<view class="column u-skeleton-fillet" hover-class="touch" hover-start-time="0" hover-stay-time="300" @tap="columeTap">
				<view class="column-image">
					<ImageLoad :src="evaluateData.profile.readCoverUrl" borderRadius="30" />
					<text class="fonts">{{ evaluateData.profile.name }}</text>
				</view>
				<text class="column-summary fonts">{{ evaluateData.profile.summary }}</text>
			</view>
			<view class="column u-skeleton-fillet"><ImageLoad src="https://hz-huibenxia.oss-cn-shenzhen.aliyuncs.com/mp/trail/cover-math3.png" borderRadius="30"/></view>
		</view>
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
import Head from '../../components/head/head.vue'
export default {
	data() {
		return {
			evaluateData: {
				profile: {}
			},
			loading: true
		}
	},
	onShareAppMessage() {
		return {
			title: '孩子的认知优势，决定孩子的未来。赶紧测一测吧！',
			path: '/pages/evaluate/evaluate',
			imageUrl: ''
		}
	},
	components: {
		Head
	},
	onLoad() {
		this.loadData()
	},
	methods: {
		/**
		 * 获取评测数据
		 */
		loadData: async function() {
			const [data, err] = await this.awaitWarp(this.$post(this.api.loadTrailData, { deviceUuid: this.deviceUuid }))
			//请求错误重新请求
			if (err) {
				uni.showLoading({
					title: '正在加载',
					mask: true
				})
				const timer2 = setTimeout(() => {
					this.loadData()
				}, 1000)
				this.$once('hook:beforeDestory', function() {
					clearInterval(timer2)
				})
				return
			}
			this.evaluateData = data
			console.log(this.evaluateData)
			uni.hideLoading()
			//隐藏骨架屏
			this.loading = false
		},
		/**
		 *	点击进入评测详情
		 */
		columeTap: function() {
			this.$Router.push({ name: 'evaluateDetail', query: { item: JSON.stringify(this.evaluateData) } })
		},
		/**
		 * 	点击进入绘本列表
		 */
		toPicbook: function() {
			this.$Router.push({ name: 'picbookList' })
		}
	}
}
</script>

<style scoped lang="stylus">
.container
	width 100vw
	height auto
	min-height 100vh
	display flex
	flex-direction column
	background white

	.header
		width 750rpx
		height 450rpx
		background url('http://hz-huibenxia.oss-cn-shenzhen.aliyuncs.com/Static-library/yingxiao/homeTop.png') 0 0 / 100% 100%
		position absolute

	.header-title
		color white
		font-size 55rpx
		width fit-content
		margin 110rpx auto 30rpx auto
		font-weight bold
		text-shadow 2rpx 2rpx 2rpx #EFBC34
		z-index 1

	.head
		position absolute
		top 100rpx
		left 50rpx
		z-index 1

	.column-title
		color #909399
		font-size 35rpx
		width fit-content
		margin 20rpx 0 0 40rpx
		font-weight bold

	.column-subTitle
		font-size 50rpx
		margin-left 40rpx
		width fit-content
		position relative
		margin-top 10rpx
		z-index 1
		font-weight bold

	.column
		width 680rpx
		height 520rpx
		margin 30rpx auto
		z-index 1
		position relative
		border-radius 30rpx
		overflow hidden
		transform translate3d(0, 0, 0)
		box-shadow 0 0 50rpx #909399
		transition all 0.3s

		.column-image
			width 680rpx
			height 400rpx
			position relative

			text
				position absolute
				right 30rpx
				top 30rpx
				font-size 45rpx
				color white
				letter-spacing 5rpx

		.column-summary
			width 680rpx
			height 120rpx
			display flex
			align-items center
			justify-content center
			color #606266
			font-size 30rpx
			background white
			box-sizing border-box
			padding 0 30rpx
</style>
